<!--
 * @Description: 
 * @Version: 1.668
 * @Autor: Hawk
 * @Date: 2022-05-12 16:32:48
 * @LastEditors: Hawk
 * @LastEditTime: 2022-05-25 11:20:43
-->
<script>
import Vue from 'vue';
import dayjs from 'dayjs';

import timeLine from '@/timeLine';
import historyTimeLine from '@/timeLine/history';
import forecastTimeLine from '@/timeLine/forecast';
import VueDateTimePicker from '@/DateTimePicker';

import 'vue-slider-component/theme/default.css';


export default Vue.extend({
  name: 'ServeDev',
  components: {
    timeLine,
    historyTimeLine,
    forecastTimeLine,
    VueDateTimePicker,
  },
  data () {
    return {
      time: '2022-01-01 12:00:00',
      // time2: '2022-01-01 08:00:00',
      time2: '',
    };
  },
  mounted () {
    setTimeout(() => {
      this.time2 = '2022-01-01 12:00:10';
    }, 1000);
  },
  methods: {
    showLabel (v) {
      return dayjs(v, this.$refs.tllREF.dateFormartStr).format('HH');
    },
    async changeCurTime (v) {
      // 可以作为异步函数，然后等待loading结束后再进行其他操作
      console.log('changeCurTime', v);
    },
    handleChange (val) {
      console.log('2改变了', val);
    },
  },
});
</script>

<template>
  <div id="app">
    <timeLine class="timeLineDemo" :changeCurTime="changeCurTime" 
    curTimerSlider="2022/07/18 18:00" dateFormartStr="YYYY/MM/DD HH:mm" :curTimeInterval="60" TimeIntervalUnit="minute" :timeListLength="48"
    tooltip="always" timesOrder="sort"/>

    <timeLine ref="tllREF" class="timeLineDemo" timesOrder="reverse">
      <template v-slot:label="{ obj }">
        <div class="labelCom">
          {{ showLabel(obj.label) }}
        </div>
      </template>
    </timeLine>

    <historyTimeLine class="timeLineDemo" />
    <forecastTimeLine class="timeLineDemo" />

    <div class="one-line">
      <VueDateTimePicker v-model="time" />
    </div>
    <div class="two-lines">
      <VueDateTimePicker v-model="time2" btns-at-new-line :custom-hours="['08', '20']" show-minite
        @onChange="handleChange" />
    </div>
  </div>
</template>

<style lang="scss">
html {
  height: 100%;
}

body {
  width: 100%;
  margin: 0;
  // background-color: black;
}

#app {
  width: 100%;
  height: 100%;
}

.timeLineDemo {
  position: relative;
  margin: 60px 20px;

  .labelCom {
    margin-top: 10px;
    margin-left: -0.5em;
  }
}

.one-line {
  background: #002a68f3;
  margin-top: 20px;
  width: 390px;
  padding: 10px;
}

.two-lines {
  background: #002a68f3;
  margin-top: 20px;
  width: 330px;
  padding: 10px;
}
</style>
